<!--
 * @Author: Bo Cai
 * @Mail: caibo0520@qq.com
 * @Date: 2021-10-06 02:13:26
 * @LastEditors: Bo Cai
 * @LastEditTime: 2021-10-06 23:24:11
-->
<template>
    <div class="app-container">
        <el-input
            v-model="filterText"
            placeholder="Filter keyword"
            style="margin-bottom: 30px"
        />

        <el-tree
            ref="subjectTree"
            :data="subjectList"
            :props="defaultProps"
            :filter-node-method="filterNode"
            class="filter-tree"
            default-expand-all
        />
    </div>
</template>

<script>
import subject from '@/api/edu/subject'
export default {
    data() {
        return {
            filterText: '',
            subjectList: [],
            defaultProps: {
                children: 'children',
                label: 'title',
            },
        }
    },
    watch: {
        filterText(val) {
            this.$refs.subjectTree.filter(val)
        },
    },

    created() {
        this.fetchNodeList()
    },

    methods: {
        fetchNodeList() {
            subject.getNestedTreeList().then((response) => {
                if (response.success === true) {
                    this.subjectList = response.data.items
                }
            })
        },
        filterNode(value, data) {
            if (!value) return true
            return data.title.toLowerCase().indexOf(value.toLowerCase()) !== -1
        },
    },
}
</script>